<template>
	<view>
		<view>
			<view class="row itemTitle pding25">
				<view class="w70">近45日是否有申报记录</view>
				<view class="w30 marginL16">{{ declareList.applyRecords ? '有' : '无' }}</view>
			</view>
			<view class="row pding25">
				<view class="w70">近30天申报金额</view>
				<view class="w30 marginL16">
					{{ declareList.applyAmountMonths1 ? `${$p(declareList.applyAmountMonths1)}` : '-' }}
				</view>
			</view>

			<view class="row itemTitle pding25">
				<view class="w70">近12个月申报次数</view>
				<view class="w30 marginL16">{{ declareList.applySum12 ? `${declareList.applySum12}` : '-' }}</view>
			</view>
		</view>
		<view class="uni-card  cardContent">
			<view class="row title" style="margin: 20rpx 0;">
				<view class="row rowStart">
					<view class="tcard"></view>
					<text style="font-weight: 500">申报数据对比分析</text>
				</view>
				<view class="row rowStart">
					<view style="width: 24rpx;height: 32rpx;margin-right: 10rpx">
						<image src="/pagesWater/static/rightMore.png" style="width: 100%;height: 100%"></image>
					</view>
					<view style="color: #999999;font-size: 26rpx">左滑查看更多</view>
				</view>
			</view>
			<view class="taxclassTable" style="position:relative;">
				<view v-if="isDemo != ''" class="potrans">
					<image src="/pagesWater/static/waterLogo.png" style="width: 320rpx;height: 200rpx"></image>
				</view>
				<tableData :tableType="'column'" :tableData="declarationArr" :colWidth="'40'">
					<view style="display: flex; width: 100%; overflow: hidden;" class="data-cell-box"
						v-for="(item, index) in declarationArr" :key="index">
						<view :style="{
							width: (100 / declarationArr.length) + '%', padding: index == 0 ? '28rpx 12rpx' : '20rpx 12rpx', background: index == 0 ? '#F1F5F9' : ''
						}" class="data-cell" v-for="(v, i) in declarationObj.length - 1" :key="i">
							<view v-if="index == 0">
								{{ item["price" + (i + 1)] }}
							</view>
							<view v-else>
								<view v-if="['申报金额'].includes(item.month)">{{ $p(item["price" + (i + 1)]) }}</view>
								<view v-else>{{ item["price" + (i + 1)] ? item["price" + (i + 1)] + '%' : '-' }}</view>
							</view>
						</view>
					</view>
					<view v-if="declarationArr.length == 0" class="emptySty">
						暂无数据
					</view>
				</tableData>
			</view>

			<view class="row title">
				<view class="row" style="justify-content: flex-start;margin: 20rpx 0;">
					<view class="tcard"></view>
					<text style="font-weight: 500">近三年申报总金额</text>
				</view>
			</view>
			<view class="taxTable" style="position:relative;">
				<view v-if="isDemo != ''" class="potrans">
					<image src="/pagesWater/static/waterLogo.png" style="width: 320rpx;height: 200rpx"></image>
				</view>
				<tableData :tableTitleData="declaredTitle">
					<view style="display: flex" class="data-row" v-for="(item, index) in declaredObj" :key="index">
						<view :style="{ width: (100 / declaredObj.length) + '%' }" class="data-cell">{{ item.month }}
						</view>
						<view :style="{ width: (100 / declaredObj.length) + '%' }" class="data-cell"
							v-for="(v, i) in declaredTitle.length - 1" :key="i">{{ $p(item['price' + (i + 1)]) }}</view>
					</view>
					<view v-if="JSON.stringify(declaredObj) == '[]'" class="emptySty">
						暂无数据
					</view>
				</tableData>
			</view>

			<view class="row title" style="justify-content: flex-start;margin: 24rpx 0;">
				<view class="tcard"></view>
				<text style="font-weight: 500">近三年无票收入</text>
			</view>
			<view class="taxTable" style="position: relative">
				<view v-if="isDemo != ''" class="potrans">
					<image src="/pagesWater/static/waterLogo.png" style="width: 320rpx;height: 200rpx"></image>
				</view>
				<tableData :tableTitleData="noTickTitle">
					<view style="display: flex" class="data-row" v-for="(item, index) in noTickObj" :key="index">
						<view :style="{ width: (100 / noTickObj.length) + '%' }" class="data-cell">{{ item.month }}
						</view>
						<view :style="{ width: (100 / noTickObj.length) + '%' }" class="data-cell"
							v-for="(v, i) in noTickTitle.length - 1" :key="i">{{ $p(item['price' + (i + 1)]) }}</view>
					</view>
					<view v-if="JSON.stringify(noTickObj) == '[]'" class="emptySty">
						暂无数据
					</view>
				</tableData>
			</view>
		</view>
	</view>
</template>

<script>
import {
	getReportDetailInvoiceApi
} from '@/api/user'
import tableData from "@/components/tableData.vue";
export default {
	components: {
		tableData
	},
	props: {
		shareCode: {
			type: String,
			default: ''
		},
		taskId: {
			type: String,
			default: ''
		},
		isDemo: {
			type: String,
			default: "",
		},
		data() {
			return {
				declareList: {},
				declaredTitle: [{
					title: '月份'
				}],
				noTickTitle: [{
					title: '月份'
				}],
				declarationObj: [{
					title: '申报数据对比分析'
				}],
				noTickObj: [],
				declaredObj: [],
				declarationArr: [],
				objarr: []
			}
		},
		created() {
			this.getInfo()
		},
		methods: {
			getInfo() {
				let params = {
					shareCode: this.shareCode,
					taskId: this.taskId
				}
				getReportDetailInvoiceApi(params).then(res => {
					this.declareList = res.data
					this.filterTableData()
				}).finally(() => {
					// this.loading = false
				})
			},
			filterTableData() {
				let val = this.declareList
				this.declaredTitle = [{
					title: '月份'
				}]
				this.noTickTitle = [{
					title: '月份'
				}]
				this.declarationObj = [{
					title: '申报数据对比分析'
				}]
				val.applyInfoDataList.forEach(item => {
					this.declaredTitle.push({
						title: item.year + '年'
					})
				})
				this.addTableSum(val.applyInfoDataList)

				val.enterpriseMonthApplyList.forEach((item, index) => {
					this.declarationObj.push({
						title: `近${item.month}个月`
					})
				})
				this.declarationArr = []
				val.enterpriseMonthApplyList.forEach(item => {
					item.monthData = [{
						name: '申报金额',
						value: item.taxEnterpriseApplyDate.applyAmount
					},
					{
						name: '申报环比增长率',
						value: item.taxEnterpriseApplyDate.applyGrowthRate
					},
					{
						name: '申报同比增长率',
						value: item.taxEnterpriseApplyDate.applyOverGrowthRate
					}
					]
				})
				this.declarationArr = this.$util.transformData(val.enterpriseMonthApplyList, 'F')
				this.declarationArr.unshift({})
				val.enterpriseMonthApplyList.forEach((item, i) => {
					this.declarationArr[0].month = '申报数据对比分析'
					this.declarationArr[0][`price${i + 1}`] = `近${item.month}个月`
				});

				this.declaredObj = this.$util.transformData(val.applyInfoDataList)
				val.applySalesDataList.forEach(item => {
					this.noTickTitle.push({
						title: item.year + '年'
					})
				})
				this.addTableSum(val.applySalesDataList)
				this.noTickObj = this.$util.transformData(val.applySalesDataList)
			},
			addTableSum(table) {
				table.forEach(item => {
					if (item.monthData.length < 12) {
						item.monthData.push({
							name: item.monthData.length + (12 - item.monthData.length)
						})
					}
				})
				table && table.forEach(item => {
					item.monthData.push({
						name: '合计',
						type: 0,
						value: item.total || 0
					})
				})

				this.objarr = this.$util.transformData(table)
			},
		}
	},
	data() {
		return {
			declareList: {},
			declaredTitle: [{
				title: '月份'
			}],
			noTickTitle: [{
				title: '月份'
			}],
			declarationObj: [{
				title: '申报数据对比分析'
			}],
			noTickObj: [],
			declaredObj: [],
			declarationArr: [],
			objarr: []
		}
	},
	created() {
		this.getInfo()
	},
	methods: {
		getInfo() {
			let params = {
				shareCode: this.shareCode,
				taskId: this.taskId
			}
			getReportDetailInvoiceApi(params).then(res => {
				this.declareList = res.data
				this.filterTableData()
			}).finally(() => {
				// this.loading = false
			})
		},
		filterTableData() {
			let val = this.declareList
			this.declaredTitle = [{
				title: '月份'
			}]
			this.noTickTitle = [{
				title: '月份'
			}]
			this.declarationObj = [{
				title: '申报数据对比分析'
			}]
			val.applyInfoDataList.forEach(item => {
				this.declaredTitle.push({
					title: item.year + '年'
				})
			})
			this.addTableSum(val.applyInfoDataList)

			val.enterpriseMonthApplyList.forEach((item, index) => {
				this.declarationObj.push({
					title: `近${item.month}个月`
				})
			})
			this.declarationArr = []
			val.enterpriseMonthApplyList.forEach(item => {
				item.monthData = [{
					name: '申报金额',
					value: item.taxEnterpriseApplyDate.applyAmount
				},
				{
					name: '申报环比增长率',
					value: item.taxEnterpriseApplyDate.applyGrowthRate
				},
				{
					name: '申报同比增长率',
					value: item.taxEnterpriseApplyDate.applyOverGrowthRate
				}
				]
			})
			this.declarationArr = this.$util.transformData(val.enterpriseMonthApplyList, 'F')
			this.declarationArr.unshift({})
			val.enterpriseMonthApplyList.forEach((item, i) => {
				this.declarationArr[0].month = '申报数据对比分析'
				this.declarationArr[0][`price${i + 1}`] = `近${item.month}个月`
			});

			this.declaredObj = this.$util.transformData(val.applyInfoDataList)
			val.applySalesDataList.forEach(item => {
				this.noTickTitle.push({
					title: item.year + '年'
				})
			})
			this.addTableSum(val.applySalesDataList)
			this.noTickObj = this.$util.transformData(val.applySalesDataList)

			console.log(this.declarationArr, 'declarationArr');
		},
		addTableSum(table) {
			table.forEach(item => {
				if (item.monthData.length < 12) {
					item.monthData.push({
						name: item.monthData.length + (12 - item.monthData.length)
					})
				}
			})
			table && table.forEach(item => {
				item.monthData.push({
					name: '合计',
					type: 0,
					value: item.total || 0
				})
			})

			this.objarr = this.$util.transformData(table)
		},
	}
}
</script>

<style lang="scss" scoped>
.pding25 {
	padding: 25rpx 0 !important;
}

.rowStart {
	justify-content: flex-start
}

.potrans {
	position: absolute;
	z-index: 9;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%)
}

.emptySty {
	text-align: center;
	line-height: 100rpx;
	height: 100rpx;
	font-size: 26rpx;
	color: #888888
}

.tcard {
	width: 5px;
	height: 18px;
	border-radius: 8rpx;
	background: #488AFD;
	margin-right: 20rpx
}

.w70 {
	width: 45%;
	text-align: right;
	font-size: 28rpx;
	color: #999999;
	white-space: nowrap;
}

.w30 {
	width: 55%;
	text-align: left;
	font-size: 28rpx;
	color: #222222;
	font-weight: 500;
	//white-space: nowrap;
}

.marginL16 {
	margin-left: 16rpx
}

.itemTitle {
	background: #F1F5F9;
	color: #a8a8a8;
	margin-top: 10rpx;
	margin-bottom: 10rpx;
	padding: 10rpx 16rpx;
}

.cardContent {
	box-shadow: none;
	padding-top: 20rpx;
	//padding-bottom: 20rpx;
	border-radius: 0 0 15rpx 15rpx;
	margin-top: 0;

	.tagContent {
		background: #D3E3FE;
		line-height: 80rpx;
		border-radius: 16rpx;
		margin-bottom: 24rpx;
		font-weight: 500;

		.tagStyle {
			width: 50%;
			height: 80rpx;
			text-align: center;
		}

		.active {
			color: #FFFFFF;
			background: #488AFD;
			border-radius: 16rpx;
		}
	}
}

/deep/ .table-container {
	border-radius: 20rpx;
	overflow: hidden;
}

/deep/ .data-cell {
	padding: 20rpx 12rpx;
}
</style>